<!DOCTYPE html>
<html lang="en">

<head>
  <title>window对象练习</title>
</head>

<body>
  <input type="button" value="打开一个新窗口" onclick="openWin()" />
  <br>
  <input type="button" value="移动这个新窗口" onclick="moveWin()" />
  <br>
  <input type="button" value="聚焦到新窗口" onclick="focusWin()" />
  <br>
  <input type="button" value="调整这个新窗口大小" onclick="resize()" />
  <br>
  <input type="button" value="关闭这个新窗口" onclick="closeWin()" />
  <br>
  <input type="button" value="打印本窗口" onclick="printWin()" />
  <br>
  <input type="button" value="关于这个浏览器窗口" onclick="showWInMessage()" />
  <br>
  <input type="button" value="滚动" onclick="scrollWin()" />

  <!-- location -->
  <br>
  <input type="button" value="获取页面信息" onclick="getPageInfo()" />

  <!-- navigator -->
  <br>
  <input type="button" value="获取浏览器信息" onclick="getBrowserInfo()" />

  <script>
    var myWindow;
    function openWin() {
      //打开一个新窗口
      myWindow = window.open("./8-小方块阵列.html", 'haha', 'width=300,height=300')
    }

    function moveWin() {
      //移动这个新窗口
      myWindow.moveTo(300, 100)
    }
    function focusWin() {
      //聚焦这个新窗口
      myWindow.document.write("<p>这是'我的窗口'</p>");
      myWindow.focus();
    }
    function resize() {
      //调整这个新窗口大小
      myWindow.resizeTo(300, 600)
    }
    function closeWin() {
      //关闭这个新窗口
      //弹出系统对话框要求用户是否确认关闭新开的窗口
      // myWindow.close()
      // var x;
      // var r = confirm("按下按钮!");
      // if (r == true) {
      //   x = "你按下了\"确定\"按钮!";
      // }
      // else {
      //   x = "你按下了\"取消\"按钮!";
      // }
      // document.getElementById("demo").innerHTML = x;

      const r = confirm("是否确定关闭窗口")
      if (r) {
        myWindow.close()
      }
    }
    function printWin() {
      //打印窗口
      myWindow.print()
    }
    function showWInMessage() {
      //新开一个窗口，显示父窗口信息
      /* 
         浏览器窗口宽度(不包含工具栏与滚动条)
         浏览器窗口高度(包含工具栏与滚动条)
         浏览器名称为
         浏览器的完整高度，包含工具栏与滚动条
         浏览器的完整宽度，包含工具栏与滚动条
         浏览器窗口相对于计算机屏幕的 X 坐标
         浏览器窗口相对于计算机屏幕的 Y 坐标
         当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
         当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
      */
      myWindow = window.open("", 'haha', 'width=300,height=300')
      myWindow.document.write(`
        <p>浏览器窗口宽度(不包含工具栏与滚动条) : ${myWindow.innerWidth}</p>
        <p>浏览器窗口高度(不包含工具栏与滚动条) : ${myWindow.innerHeight}</p>
        <p>浏览器名称为 : ${myWindow.name}</p>
        <p>浏览器的完整高度，包含工具栏与滚动条 : ${myWindow.outerHeight}</p>
        <p>浏览器的完整宽度，包含工具栏与滚动条 : ${myWindow.outerWidth}</p>
        <p>浏览器窗口相对于计算机屏幕的 X 坐标 : ${myWindow.screenLeft || myWindow.screenX}</p>
        <p>浏览器窗口相对于计算机屏幕的 Y 坐标 : ${myWindow.screenTop || myWindow.screenY}</p>
        <p>当前页面相对于浏览器窗口左上角沿水平方向滚动的距离 : ${myWindow.pageXOffset}</p>
        <p>当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离 : ${myWindow.pageYOffset}</p>
      `);

      setTimeout(() => {
        myWindow.document.write(`
        <p>浏览器窗口宽度(不包含工具栏与滚动条) : ${myWindow.innerWidth}</p>
        <p>浏览器窗口高度(不包含工具栏与滚动条) : ${myWindow.innerHeight}</p>
        <p>浏览器名称为 : ${myWindow.name}</p>
        <p>浏览器的完整高度，包含工具栏与滚动条 : ${myWindow.outerHeight}</p>
        <p>浏览器的完整宽度，包含工具栏与滚动条 : ${myWindow.outerWidth}</p>
        <p>浏览器窗口相对于计算机屏幕的 X 坐标 : ${myWindow.screenLeft || myWindow.screenX}</p>
        <p>浏览器窗口相对于计算机屏幕的 Y 坐标 : ${myWindow.screenTop || myWindow.screenY}</p>
        <p>当前页面相对于浏览器窗口左上角沿水平方向滚动的距离 : ${myWindow.pageXOffset}</p>
        <p>当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离 : ${myWindow.pageYOffset}</p>
      `);
      }, 100);
    }
    function scrollWin() {
      //移动关于这个浏览器窗口到（0px,100px）
      myWindow.scrollTo(0, 100)
    }

    // location
    function getPageInfo() {
      console.log(location.href = 'https://www.baidu.com');
      alert(`
      ● 页面完整 href: ${location.href}
      ● 页面路径 : ${location.pathname}
      ● 页面协议 : ${location.protocol}
      ● 页面哈希值,这里需要您对哈希字符串进行处理不要带# :${location.hash.substring(1)}
      ● 页面主机名和端口号  : ${location.port}  
      `)
    }

    // navigator
    function getBrowserInfo() {
      alert(`
      ● 浏览器的内部名称（开发代号）: ${navigator.appCodeName}
      ● 浏览器的官方名称：${navigator.appName}
      ● 浏览器的平台和版本信息: ${navigator.appVersion}
      ● 浏览器中是否启用 cookie 的布尔值 : ${navigator.cookieEnabled}
      ● 浏览器是否联网 : ${navigator.onLine}
      ● 浏览器的操作系统平台 : ${navigator.platform}
      ● 浏览器的厂商和版本信息：${navigator.userAgent}
      `)
    }

    function goNextPage() {
      location.href = './16.history.html'
    }

  </script>
</body>

</html>